<template>
  <div v-loading="loading">
    <div class="text-right mb-2">
      <el-button @click="getData()" icon="el-icon-refresh" :loading="loading">刷新</el-button>
      <el-button @click="handleView" :disabled="!contractId">查看联保函</el-button>
    </div>
    <table class="table table-bordered table-vertical-middle" v-loading="loading">
      <tr>
        <td width="12%" class="td-label">签章日期</td>
        <td width="38%" class="input-td">
          <el-input v-model="letter.sign_date" placeholder="签章日期"></el-input>
        </td>
        <td width="12%" class="td-label">放款金额</td>
        <td width="38%" class="input-td">
          <el-input placeholder="放款金额" v-model="letter.apply_funds" @change="setCapital">
            <span slot="append">（{{ letter.apply_funds_capital }}）</span>
          </el-input>
        </td>
      </tr>
      <tr>
        <td width="12%" class="input-td">
          <el-input v-model="letter.ensure_contract_name" placeholder="保证合同名称"></el-input>
        </td>
        <td width="38%" class="input-td">
          <el-input v-model="letter.ensure_contract_no" placeholder="保证合同号"></el-input>
        </td>
        <td width="12%" class="td-label">
          <el-input v-model="letter.loan_contract_name" placeholder="借款合同名称"></el-input>
        </td>
        <td width="38%" class="input-td">
          <el-input v-model="letter.loan_contract_no" placeholder="借款合同号"></el-input>
        </td>
      </tr>
      <tr>
        <td width="12%" class="td-label">贷款期限</td>
        <td width="38%" class="input-td">
          <el-input v-model="letter.load_years" placeholder="贷款期限"></el-input>
        </td>
        <td width="12%" class="td-label">委托合同号</td>
        <td width="38%" class="input-td">
          <el-input v-model="letter.entrust_gua_no" placeholder="委托合同号"></el-input>
        </td>
      </tr>
    </table>
    <div>
      <c-select
        :options="{
          0: '不盖章(客户线下签约时选择)',
          1: '加盖公章',
        }"
        :number-key="true"
        v-model="signStatus"
      ></c-select>
    </div>
    <div class="text-center py-4">
      <el-button
        type="primary"
        class="btn-long"
        :loading="submitLoading"
        @click="submit"
        :disabled="+letter.sign_status === 2"
      >
        {{ letter.loan_notice_id ? '修改' : '添加' }}放款通知书
      </el-button>
      <!-- <el-button class="btn-long"
                  :loading="submitLoading"></el-button> -->
    </div>

    <el-dialog
      top="30px"
      width="900px"
      append-to-body
      :close-on-click-modal="false"
      :before-close="beforeClose"
      :visible.sync="letterView"
    >
      <pdf-view :contract-id="contractId" :view-mode="true"></pdf-view>
    </el-dialog>
  </div>
</template>

<script>
import PdfView from '@/credit/views/county/unionProvince/components/PdfView'
import { nzhToMoney } from '@vimi/utils-tool'
import { mapGetters } from 'vuex'
export default {
  components: { PdfView },
  props: {
    queryId: String,
  },
  data() {
    return {
      tableName: 'loan_notice',
      loading: false,
      letter: {},
      letterView: false,
      submitLoading: false,
      signStatus: 1,
    }
  },
  computed: {
    ...mapGetters(['entrustContract']),
    contractId() {
      return this.letter.doc_id
    },
  },
  watch: {
    queryId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    setCapital() {
      this.letter.apply_funds_capital = nzhToMoney(+this.letter.apply_funds * 10000)
    },
    submit() {
      const data = {
        apply_funds_capital: this.letter.apply_funds_capital,
        apply_funds: this.letter.apply_funds,
        ensure_contract_no: this.letter.ensure_contract_no,
        loan_contract_no: this.letter.loan_contract_no,
        entrust_gua_no: this.letter.entrust_gua_no,
        load_years: this.letter.load_years,
        sign_date: this.letter.sign_date,
        ensure_contract_name: this.letter.ensure_contract_name,
        loan_contract_name: this.letter.loan_contract_name,
      }

      if (!this.letter.loan_notice_id) {
        this.$api
          .addData(this.$serviceName, this.tableName, data)
          .then(() => {
            this.getData()
            this.$message.success('保存成功!')
          })
          .catch(() => {
            this.$message.error('生成失败')
          })
      } else {
        this.$api
          .updateData(this.$serviceName, this.tableName, this.letter.loan_notice_id, {
            ...data,
            sign_status: this.signStatus,
          })
          .then(() => {
            this.getData()
            this.$message.success('更新成功!')
          })
      }
    },
    handleView() {
      this.letterView = true
    },
    beforeClose() {
      this.letterView = false
    },
    getData() {
      this.loading = true
      this.$api
        .getData(
          this.$serviceName,
          this.tableName,
          { 'customer_related_id.eq': this.queryId },
          { create_time: 'desc' }
        )
        .then(res => {
          this.letter = res?.data?.[0] ?? {}
          this.letter.apply_funds_capital = this.entrustContract.reply_funds_capital
          this.letter.apply_funds = this.entrustContract.reply_funds
          this.letter.ensure_contract_no = this.entrustContract.ensure_contract_no
          this.letter.loan_contract_no = this.entrustContract.loan_contract_no
          this.letter.entrust_gua_no = this.entrustContract.entrust_contract_cno
          this.letter.load_years = this.entrustContract.load_years
          this.letter.cert_no = this.entrustContract.entrust_entity_cert_no
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
